<template>
	<view class="layout">
		
		
		<view class="list">
			<uni-card title="2024-10-20" extra="" v-for="(item,index) in 8" :key="index">
			
					<view class="row">
						<view class="left">
							辅导员编号
						</view>
						<view class="right">
							100001
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							姓名
						</view>
						<view class="right">
							刘德华
						</view>
					</view>
					
					
					<view class="row">
						<view class="left">
							组织归属
						</view>
						<view class="right">
							市场营销系
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							类别
						</view>
						<view class="right">
							生活辅导员
						</view>
					</view>
					
					<uni-collapse>
						<uni-collapse-item title="权限">
											<view class="content">
												<view class="pers" v-for="(item,index) in per" :key="index">
														{{item.text}}
												</view>
											</view>
											
											<view class="update">
												<button class="but" @click="update">修改权限</button>
											</view>
						</uni-collapse-item>
					</uni-collapse>
					
					
			
			</uni-card>
		</view>
		
		<!-- 修改弹框 -->
		<uni-popup ref='addPopup' type='bottom':safe-area="false" >
			<view class="addPopup">
				<view class="popheader">
					<view></view>
					<view class="title">修改权限</view>
					<view class="close" @click="closeGT">X</view>
				</view>
				
				<scroll-view scroll-y>
						<view class="content">
								<view class="rows">
									<uni-data-checkbox mode="tag" multiple v-model="checkPer" :localdata="per"></uni-data-checkbox>
								</view>
								
								
								<view class="rows">
								
								</view>
								
								
										
								<button class="but" @click="">确认修改</button>
										
							 <view class="safe-area-shop">
							 	
							 </view>
							<view class="safe-area-inset-bottom">
								
							</view>
							
						</view>
				</scroll-view>
			
			</view>
		</uni-popup>
		<!-- 添加弹框结束 -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { permission } from "../../utils/permission.js";
const addPopup = ref(null);//修改弹框
const pers =ref(permission);
const per= ref([
			{
				text: '权限1',
				value: 0
			}, {
				text: '权限2',
				value: 1
			}, {
				text: '权限3',
				value: 2
			},
			{
				text: '权限4',
				value: 3
			},
			{
				text: '权限5',
				value: 4
			},
			{
				text: '权限6',
				value: 5
			},
			{
				text: '权限7',
				value: 6
			},
			{
				text: '权限8',
				value: 7
			}
			
]);//权限类别

const checkPer = ref([]);//权限选择

const update = ()=>{
	addPopup.value.open();
	let pers2 = [];
	per.value.map((item)=>{
		
		pers2.push(item.value);
	
		checkPer.value = pers2;
		
	})
}





const closeGT = ()=>{
	addPopup.value.close();
}

//级联选择期修改
const onchange =()=>{
	
}
const onnodeclick =()=>{
	
}


</script>

<style lang='scss' scoped>
	 .layout{
		 padding: 20rpx 30rpx;
		 .but{
		 			width: 500rpx;
		 			height: 80rpx;
		 			border-radius: 40rpx;
		 			background: red;
		 			color: #fff;
		 }
		 button::after{ border: none;}
		 button{
		 	line-height:80rpx;
		 } 
		 
			.list{
				.content{
					display: grid;
					gap:10rpx;
					grid-template-columns: repeat(4,1fr);
					.pers{
						background: $xx-color-body;
						border-radius: 10rpx;
						text-align: center;
						color: #fff;
					}
					
				}
				
				.update{
					padding:20rpx 0;
					.but{
						background: red;
					}
				}
				
				.row{
								  display: flex;
								  justify-content: space-between;
								  .left{
									  
								  }
								  
								  .right{
									 font-weight:600;
									 color: $xx-color-body;
								  }
				}
				
			}
		 
			
			 .add{
				 padding: 0 10rpx;
			 }
			  
		    .addPopup{
		    	position: relative;
		    	background:#fff;
		    	padding: 30rpx;
		    	border-radius: 30rpx 30rpx 0 0;
		    	overflow: hidden;
		    	width:100vw;
		    	
		    	scroll-view{
		    		max-height: 60vh;
					height: 60vh;
		    	}
				.popheader{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						color:$xx-color-body;
						font-size: 28rpx;
					}
					.close{
						padding: 4rpx;
					}
				}
		    	
		    	.content{
		    			
					.rows{
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #ccc;
						margin-bottom: 20rpx;
						.left{
							display: flex;
							justify-content: space-between;
							.star{
								color:red;
							}
						}
						.right{
							display: flex;
							justify-content: space-between;
							align-items: center;
							text-align: right;
							color:$xx-color-body;
						}
						
						.text{
							display: flex;
							.star{
								
								color:red;
							}
						}
						
						
					}
					
					.rowsText{
						padding: 30rpx 0;
							.uni-title{
								
								font-size: 26rpx;
							}
							.uni-textarea{
								border: 1rpx solid $xx-color-body;
							}
					}
					
					  			
								
		    		
		    	}
		    }
			
			   
		 
	 }      
</style>
